<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出</title>
  <style>
    /*
    overflow 属性可设置以下值：
      visible - 默认。溢出没有被剪裁。内容在元素框外渲染
      hidden - 溢出被剪裁，其余内容将不可见
      scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
      auto - 与 scroll 类似，但仅在必要时添加滚动条
    */
    div.visible{
      background-color: #eee;
      width: 100px;
      height: 50px;
      border: 1px dotted black;
      overflow: visible;
    }
    div.hidden{
        float: left;
      background-color: #eee;
      width: 100px;
      height: 50px;
      border: 1px dotted black;
      overflow: hidden;
      margin-left: 200px;
    }
    div.scroll{
        float: left;
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;
      overflow: scroll;
      margin-left:300px;
    }
    div.auto{
        float: right;
      margin-left: 450px;
      background-color: #eee;
      width: 100px;
      height: 50px;
      border: 1px dotted black;
      overflow: auto;
    }
  </style>
</head>
<body >
<div class="visible">
  <p>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</p>
</div>
<div class="hidden">
  <p>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</p>
</div>
<div class="scroll">
  <p>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</p>
</div>
<div class="auto">
  <p>当您想更好地控制布局时，可以使用 overflow 属性。overflow 属性规定如果内容溢出元素框会发生什么情况。</p>
</div>
</body>
</html>